<template>
    <div class="pswChange-container">
      <el-form ref="formRef" :model="form" class="pswChange-form" :rules="rules">
        <div class="title-container">
          <h3 class="title">密码修改</h3>
        </div>
        <el-form-item prop="originPassword">
          <el-icon :size="20" class="svg-container">
            <template v-if="passwordVisible">
              <Unlock @click="togglePasswordVisibility" class="show-pwd-icon" />
            </template>
            <template v-else>
              <Lock @click="togglePasswordVisibility" class="show-pwd-icon" />
            </template>
          </el-icon>
          <el-input
            v-model="form.originPassword"
            :type="passwordVisible ? 'text' : 'password'"
            placeholder="  请输入原密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-icon :size="20" class="svg-container">
            <template v-if="passwordVisible">
              <Unlock @click="togglePasswordVisibility" class="show-pwd-icon" />
            </template>
            <template v-else>
              <Lock @click="togglePasswordVisibility" class="show-pwd-icon" />
            </template>
          </el-icon>
          <el-input
            v-model="form.password"
            :type="passwordVisible ? 'text' : 'password'"
            placeholder="  请输入新密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="confirmPassword">
          <el-icon :size="20" class="svg-container">
            <template v-if="confirmPasswordVisible">
              <Unlock @click="toggleConfirmPasswordVisibility" class="show-pwd-icon" />
            </template>
            <template v-else>
              <Lock @click="toggleConfirmPasswordVisibility" class="show-pwd-icon" />
            </template>
          </el-icon>
          <el-input
            v-model="form.confirmPassword"
            :type="confirmPasswordVisible ? 'text' : 'password'"
            placeholder="  请确认新密码"
          ></el-input>
        </el-form-item>
        <el-button type="primary" class="save-button" @click="handleSave">保存</el-button>
      </el-form>
    </div>
    <div id="errorContainer"></div>
  </template>

<script setup>
import { ref } from 'vue'
import { Unlock, Lock } from '@element-plus/icons-vue'
import { changePsw } from '@/api/pswChange'
import { ElMessage } from 'element-plus'

const form = ref({
  originPassword: '',
  password: '',
  confirmPassword: ''

})

const rules = ref({
  originPassword: [
    {
      required: true,
      message: 'Please input Activity password',
      trigger: 'blur'
    },
    {
      // 这里需要和数据库的密码进行验证，这个方法要重写
      validator: (rule, value, callback) => {
        if (value.length < 6) {
          callback(new Error('Passwords should have at least 6 digits'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: 'Please input Activity password',
      trigger: 'blur'
    },
    {
      validator: (rule, value, callback) => {
        if (value.length < 6) {
          callback(new Error('Passwords should have at least 6 digits'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  confirmPassword: [
    {
      required: true,
      message: 'Please confirm your password',
      trigger: 'blur'
    },
    {
      validator: (rule, value, callback) => {
        if (value !== form.value.password) {
          callback(new Error('Passwords do not match'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
})

const formRef = ref(null)

const passwordVisible = ref(false)

const confirmPasswordVisible = ref(false)

const savedSuccessfully = ref(false)

const handleSave = async () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      console.log('提交！')
      const changeResult = await changePsw(form.value)

      if (!changeResult.success) {
        ElMessage.success('保存成功')
        savedSuccessfully.value = true
      } else {
        console.log('保存失败:', changeResult.error)
      }
    } else {
      console.log('提交出错！')
    }
  })
}

const togglePasswordVisibility = () => {
  passwordVisible.value = !passwordVisible.value
}

const toggleConfirmPasswordVisibility = () => {
  confirmPasswordVisible.value = !confirmPasswordVisible.value
}
</script>

  <style lang="scss" scoped>
  $bg: #2d3a4b;
  $dark_gray: #889aa4;
  $light_gray: #eee;
  $cursor: #fff;

  .pswChange-container {
    min-height: 100%;
    width: 100%;
    background-color: $bg;
    overflow: hidden;

    .pswChange-form {
      position: relative;
      width: 520px;
      max-width: 100%;
      padding: 160px 35px 0;
      margin: 0 auto;
      overflow: hidden;

      :deep(.el-form-item) {
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        color: #454545;
      }

      :deep(.el-input) {
        display: inline-block;
        height: 47px;
        width: 85%;

        input {
          background: transparent;
          border: 0px;
          -webkit-appearance: none;
          appearance: none;
          border-radius: 0px;
          padding: 12px 5px 12px 15px;
          color: $light_gray;
          height: 47px;
          caret-color: $cursor;
        }
      }
      .save-button {
        width: 100%;
        box-sizing: border-box;
      }
    }

    .tips {
      font-size: 16px;
      line-height: 28px;
      color: #fff;
      margin-bottom: 10px;

      span {
        &:first-of-type {
          margin-right: 16px;
        }
      }
    }

    .svg-container {
      padding: 6px 5px 6px 15px;
      color: $dark_gray;
      vertical-align: middle;
      display: inline-block;
    }

    .title-container {
      position: relative;

      .title {
        font-size: 26px;
        color: $light_gray;
        margin: 0px auto 40px auto;
        text-align: center;
        font-weight: bold;
      }

      :deep(.lang-select) {
        position: absolute;
        top: 4px;
        right: 0;
        background-color: white;
        font-size: 22px;
        padding: 4px;
        border-radius: 4px;
        cursor: pointer;
      }
    }

    .show-pwd {
      font-size: 16px;
      color: $dark_gray;
      cursor: pointer;
      user-select: none;
    }
  }
  </style>
